<template>
	<div id="goods_list">
		<el-form :inline="true" size="medium">
			<el-form-item>
				<el-input v-model="params.name" placeholder="商品名称" clearable></el-input>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.storeId" placeholder="选择仓库" clearable @change="search">
					<el-option :value="item.id" :label="item.name" v-for="(item, index) in goodsStoreList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-select v-model="params.types" placeholder="商品类型" clearable @change="search">
					<el-option :value="item.id" :label="item.name" v-for="(item, index) in goodsTypesList"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="search">搜索</el-button>
				<el-button @click="dialogVisible = true">添加商品</el-button>
			</el-form-item>
		</el-form>

		<el-table :data="list" stripe v-loading="loading">
			<el-table-column label="类型" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.other_type === 1">自有仓库</span>
					<span v-if="scope.row.other_type === 2">爱代发</span>
					<span v-if="scope.row.other_type === 3">就代发</span>
					<span v-if="scope.row.other_type === 4">瑶瑶</span>
					<span v-if="scope.row.other_type === 5">星辰</span>
					<span v-if="scope.row.other_type === 6">海淘</span>
					<span v-if="scope.row.other_type === 7">代发发</span>
				</template>
			</el-table-column>
			<el-table-column label="商品编号" prop="id" align="center"></el-table-column>
			<el-table-column label="封面图" align="center">
				<template slot-scope="scope">
					<el-image fit="cover" :src="scope.row.cover" :preview-src-list="[scope.row.cover]" style="width:100px; height:100px">
					</el-image>
				</template>
			</el-table-column>
			<el-table-column label="商品名称" prop="name" align="center"></el-table-column>
			<el-table-column label="商品类型" align="center" min-width="120">
				<template slot-scope="scope">
					{{selectTypes(scope.row.types)}}
				</template>
			</el-table-column>
			<el-table-column label="所属仓库" align="center">
				<template slot-scope="scope">
					{{selectStore(scope.row.store_id)}}
				</template>
			</el-table-column>
			<el-table-column label="重量/kg" prop="weight" align="center"></el-table-column>
			<el-table-column label="成本/元" prop="cost" align="center"></el-table-column>
			<el-table-column label="租户成本/元" prop="tenant_cost" align="center"></el-table-column>
			<el-table-column label="库存/件" prop="repertory" align="center"></el-table-column>
			<el-table-column label="销量/件" prop="sales_num" align="center"></el-table-column>
			<el-table-column label="状态" align="center">
				<template slot-scope="scope">
					<span v-if="scope.row.status == 1">已上架</span>
					<span v-if="scope.row.status == 0">待上架</span>
				</template>
			</el-table-column>
			<el-table-column label="操作" align="center" min-width="120">
				<template slot-scope="scope">
					<el-button type="text" v-if="scope.row.status === 0" @click="setStatus(scope.row)">上架</el-button>
					<el-button type="text" class="error" v-if="scope.row.status === 1" @click="setStatus(scope.row)">下架</el-button>
					<el-button @click="toUpdate(scope.row)" type="text">修改</el-button>
					<el-button type="text" class="error" @click="del(scope.row.id)" v-if="scope.row.other_type==1">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<el-pagination class="page" background @size-change="handleSizeChange" @current-change="getList" :current-page.sync="params.pageNo"
		 :page-sizes="[10, 20, 50, 100]" :page-size="params.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>

		<el-dialog 
		title="添加礼品" 
		width="550px" 
		center  
		:visible.sync="dialogVisible">
			<el-form :model="formData" :rules="rules" ref="formData" label-width="128px">
				<el-form-item prop="cover" label="礼品图">
					<Upload
					ref="cover"
					:bigBox="true"
					:isMultiple="false"
					:limit_size="1"
					/>
				</el-form-item>
				<el-form-item prop="name" label="商品名">
					<el-input v-model="formData.name" autocomplete="off" placeholder="请输入商品名" :disabled="(formData.otherType && formData.otherType!=1)?true:false"></el-input>
				</el-form-item>
				<el-form-item prop="types" label="所属商家">
					<el-select v-model="formData.tenantid" placeholder="选择商家" clearable style="width: 100%;">
						<el-option :value="item.id" :label="item.company" v-for="(item, index) in tenantIdList"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="storeId" label="所属仓库">
					<el-select v-model="formData.storeId" placeholder="选择仓库" clearable style="width: 100%;" :disabled="(formData.otherType && formData.otherType!=1)?true:false">
						<el-option :value="item.id" :label="item.name" v-for="(item, index) in goodsStoreList"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="types" label="商品类型">
					<el-select v-model="formData.types" placeholder="商品类型" clearable style="width: 100%;">
						<el-option :value="item.id" :label="item.name" v-for="(item, index) in goodsTypesList"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item prop="descr" label="商品描述">
					<el-input v-model="formData.descr" autocomplete="off" placeholder="请输入商品描述" :disabled="(formData.otherType && formData.otherType!=1)?true:false"></el-input>
				</el-form-item>
				<el-form-item prop="cost" label="商品成本/元">
					<el-input v-model="formData.cost" autocomplete="off" placeholder="请输入商品成本" :disabled="(formData.otherType && formData.otherType!=1)?true:false"></el-input>
				</el-form-item>
				<el-form-item prop="tenantCost" label="租户默认成本/元">
					<el-input v-model="formData.tenantCost" autocomplete="off" placeholder="创建租户时默认生成的商品成本"></el-input>
				</el-form-item>
				<el-form-item prop="weight" label="商品重量/kg">
					<el-input v-model="formData.weight" autocomplete="off" placeholder="请输入商品重量" :disabled="(formData.otherType && formData.otherType!=1)?true:false"></el-input>
				</el-form-item>
				<el-form-item prop="repertory" label="商品库存">
					<el-input v-model="formData.repertory" autocomplete="off" placeholder="请输入商品库存" :disabled="(formData.otherType && formData.otherType!=1 && formData.otherType!=5)?true:false"></el-input>
				</el-form-item>
				<el-form-item label="是否上架">
					<el-radio-group v-model="formData.status">
						<el-radio :label="1">上架</el-radio>
						<el-radio :label="0">待上架</el-radio>
					</el-radio-group>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="write">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import Upload from '@/components/utils/Upload'
	export default {
		data() {
			return {
				params: {
					pageNo: 1,
					pageSize: 10,
					isCount: true,
					name: '',
					storeId: '',
					types: []
				},
				list: [],
				total: 0,
				selectData: '',
				loading: false,
				goodsStoreList: [],
				goodsTypesList: [],
				tenantIdList:[],
				timeArr:[],
				dialogVisible: false,
				formData: {
					cover: '',
					name: '',
					storeId: '',
					types: '',
					descr: '',
					cost: '',
					tenantCost: '',
					weight: '',
					repertory: '',
					status: 1,
					tenantid:'',
				},
				rules: {
					cover: [
						{ required: true, message: '请上传商品图', trigger: 'blur' }
					],
					name: [
						{ required: true, message: '请填写商品名', trigger: 'blur' }
					],
					storeId: [
						{ required: true, message: '请选择仓库ID', trigger: 'blur' }
					],
					types: [
						{ required: true, message: '请选择商品类型', trigger: 'blur' }
					],
					cost: [
						{ required: true, message: '请填写商品成本', trigger: 'blur' }
					],
					tenantCost: {
						required: true, message: '请填写租户默认成本', trigger: 'blur' 
					},
					weight: [
						{ required: true, message: '请填写商品重量', trigger: 'blur' }
					],
					repertory: [
						{ required: true, message: '请填写商品库存', trigger: 'blur' }
					],
				},
			};
		},

		components: {
			Upload
		},

		watch: {},

		create() {},

		mounted() {
			this.getStore();
			this.getList();
			this.getGoodsTypes();
			 this.getTenant()
		},

		methods: {
			timeChange(val){
				if(val){
					this.params.startTime = this.$common.getDate(val[0]);
					this.params.endTime = this.$common.getDate(val[1]);
				}else{
					this.params.startTime = ''
					this.params.endTime = ''
				}
			},
			handleSizeChange(value) {
				this.params.pageSize = value
				this.search()
			},
			
			handleClose(done){
				done()
			},

			search() {
				this.params.isCount = true
				this.params.pageNo = 1
				this.getList();
			},

			getList() {
				this.loading = true
				this.$request.post({
					url: '/ReportApi/admin/goodlists',
					params: this.params,
					success: result => {
						this.list = result[0]
						if (this.params.isCount) {
							this.params.isCount = false
							this.total = result[1]
						}
					},
					finally: () => {
						this.loading = false
					}
				})
			},

			getStore() {
				this.$request.post({
					closeErrInfo: true,
					closeCodeInfo: true,
					url: '/ReportApi/admin/getstore',
					success: result => {
						this.goodsStoreList = result
					}
				})
			},

			getGoodsTypes() {
				this.$request.post({
					closeErrInfo: true,
					closeCodeInfo: true,
					url: '/ReportApi/admin/goodstypes',
					success: result => {
						this.goodsTypesList = result
					}
				})
			},
            getTenant() {
				this.$request.post({
					closeErrInfo: true,
					closeCodeInfo: true,
					url: '/ReportApi/admin/tenantlistes',
					success: result => {
						this.tenantIdList = result
					}
				})
			},
			// 上下架商品
			setStatus(data) {
				this.$confirm('确认' + (data.status == 1 ? '下架' : '上架') + '商品吗?', '提示').then(() => {
					this.$request.post({
						url: '/ReportApi/admin/setstatus',
						params: {
							goodsId: data.id,
							status: data.status == 1 ? 0 : 1
						},
						success: result => {
							this.$message.success('操作成功')
							this.getList()
						}
					})
				})
			},

			// 删除商品
			del(id) {
				this.$confirm('确认删除该商品?', '提示').then(() => {
					this.$request.post({
						url: '/ReportApi/admin/goodsdel',
						params: {
							id
						},
						success: () => {
							this.$message.success('操作成功')
							if (this.params.pageNo > 1 && this.list.length < 2) {
								this.params.pageNo--
							}
							this.getList();
						}
					})
				})
			},

			selectStore(storeId) {
				if (!this.goodsStoreList.length) {
					return;
				}
				var item = this.goodsStoreList[this.goodsStoreList.findIndex(item => item.id == storeId)];
				if(item){
					return item.name
				}else{
					return "";
				}
			},

			selectTypes(types) {
				if (!this.goodsTypesList.length) {
					return;
				}
				var temp = types.split(',')
				var result = "";
				var item3 = "";
				temp.forEach((item, index) => {
					item3 = this.goodsTypesList[this.goodsTypesList.findIndex(item2 => item2.id == item)];
					if(item3){
						result += item3.name
					}
					if (index != temp.length - 1) {
						result += ' / '
					}
				})
				return result;
			},

			write(){
				// if(!this.$refs.cover.path_list[0]) {
				// 	this.$message.warning('请先上传商品图');
				// 	return;
				// }
				this.formData.cover = this.$refs.cover.path_list[0]?this.$refs.cover.path_list[0].path:'';
				this.$refs['formData'].validate((valid) => {
					if(valid){
						if(this.formLoading){
						 	return; 
						 }
						this.formLoading = true
						var url = '/ReportApi/admin/' + (this.formData.id ? 'update' : 'add') 
						console.log(url)
						this.$request.post({
							url,
							params: this.formData,
							success: result => {
								this.$message.success('操作成功')
								this.dialogVisible = false 
								this.reset()
								this.getList();
							},
							finally: ()=>{
								this.formLoading = false 
							}
						})
					}
				})
			},
			
			toUpdate(data) {
				for(var key in data){
					this.formData[key] = data[key]
				}
				this.formData.cover = data.cover.replace(this.$envConfig.serviceUrl, '')
				this.formData.storeId = data.store_id;
				this.formData.tenantCost = data.tenant_cost;
				this.formData.types = data.types;
				this.dialogVisible = true;
				setTimeout(() => {
					this.$refs.cover.path_list = [{path: data.cover}];
				},500)
			},
			
			reset(){
				for(var key in this.formData){
					this.formData[key] = ''
				}
			},
		},

		beforeDestroy() {}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.page {
		text-align: right;
		margin-top: 20px;
	}
</style>
